<template>
  <view class="page-container">
    <!-- 顶部蓝 -->
    <view class="topl">
      <image :src="`${store.imgDomain}my_data_top.png`" mode="scaleToFill" />
    </view>
    <GlobalTopBar ref="topBarRef" class="topbars" color="#fff" :isLeft="true">
      <template #title><text style="color: #fff">我的钱包</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <!-- 总资产 -->
      <view class="zzc">
        <text class="t1">总资产（元）</text>
        <text class="t2">{{ store.userInfo.balance }}</text>
        <view class="czbtn" @click="store.to('/pages/my/topUp')">去充值</view>
      </view>
      <!-- 记录 -->
      <view class="ulbox">
        <view class="toptab">
          <view class="tabbox">
            <view :class="{ ac: isTrue }" @click="isTrue = true">充值记录</view>
          </view>
          <view class="tabbox">
            <view :class="{ ac: !isTrue }" @click="isTrue = false"
              >消费记录</view
            >
          </view>
        </view>
        <scroll-view
          class="scroll-Y"
          scroll-y
          refresher-enabled
          :refresher-triggered="isRefreshing"
          @refresherrefresh="handleRefresh"
          @scrolltolower="handleLoadMore"
          refresher-background="#f5f5f5"
          refresher-threshold="80"
        >
          <view
            class="libox"
            v-for="(item, index) in listData"
            :key="index + 1"
          >
            <view class="v1"
              ><text>{{ play_typeData[item.play_type] }}</text
              ><text class="v1_t1"
                >变动前/变动后/{{ isTrue ? '增加金额' : '减少金额' }}</text
              ></view
            >
            <view class="v2"
              ><text>{{ item.create_at }}</text
              ><text class="v1_t2"
                >{{ item.old_user_balance }}/{{ item.now_user_balance }}/{{
                  isTrue ? '+' : '-'
                }}{{ item.play_amount }}</text
              ></view
            >
          </view>
        </scroll-view>
        <view v-if="!listData.length" class="wjl_box flex_center">
          <image
            class="qb1_img"
            :src="`${store.imgDomain}qb_1.png`"
            mode="widthFix"
          />
          <text>暂无记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
const userInfo = ref({});
const userAddressList = ref([]);
const isTrue = ref(true);
// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const play_typeData = {
  1: '充值卡充值',
  2: '服务订单预约',
  3: '订单退款',
  4: '订单尾款结算',
};

watch(
  () => isTrue.value,
  (val) => {
    getUserBalanceLogListByRechargeCard(true);
  },
);

// 获取余额充值记录（分页）
const getUserBalanceLogListByRechargeCard = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1;
  }
  try {
    const url = isTrue.value
      ? 'wxapp/user/getUserBalanceLogListByRechargeCard'
      : 'wxapp/user/getUserBalanceLogListByServiceOrder';
    const data = await request(url, {
      currpage: pageNum.value,
      pagesize: pageSize.value,
    });
    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getUserBalanceLogListByRechargeCard(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getUserBalanceLogListByRechargeCard();
};

onShow(() => {
  getUserBalanceLogListByRechargeCard(true);
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #3897ff;
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;

  .zzc {
    padding: 50rpx 0;
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid #437ef6;
    border-radius: 20rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .t1 {
      font-size: 30rpx;
      color: #1e1e1e;
    }
    .t2 {
      font-size: 60rpx;
      font-weight: 600;
      color: #1e1e1e;
    }
    .czbtn {
      width: 409rpx;
      line-height: 79rpx;
      border-radius: 40rpx;
      background-color: #ff6316;
      color: #fff;
      font-size: 36rpx;
      margin: 20rpx auto;
    }
  }
  .ulbox {
    padding: 30rpx;
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid #437ef6;
    border-radius: 20rpx;
    background-color: #fff;
    .toptab {
      display: flex;
      margin-bottom: 55rpx;
      .tabbox {
        flex: 1;
        display: flex;
        justify-content: center;
        view {
          width: max-content;
          color: #1e1e1e;
          font-size: 30rpx;
          position: relative;
          &.ac {
            &::after {
              content: ' ';
              position: absolute;
              bottom: -13rpx;
              left: 50%;
              transform: translate(-50%);
              width: 100%;
              height: 4rpx;
              background-color: #3184ff;
            }
          }
        }
      }
    }
    .libox {
      box-sizing: border-box;
      padding: 20rpx 0;
      border-bottom: 1px solid #a1cbff;
      view {
        display: flex;
        justify-content: space-between;
      }
      .v1 {
        font-size: 30rpx;
        .v1_t1 {
          color: #ff6600;
        }
      }
      .v2 {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: $uni-text-color-grey;
        .v1_t2 {
          font-size: 30rpx;
          color: #06c662;
        }
      }
    }
  }
}
.scroll-Y {
  position: relative;
  height: 53vh;
}
.wjl_box {
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text {
    color: $uni-text-color-grey;
  }
}
.qb1_img {
  width: 221rpx;
  margin-bottom: 10rpx;
}
</style>
